<template>
  <a-card>
    <div :class="advanced ? 'search' : null">
      <a-form layout="horizontal">
        <div :class="advanced ? null: 'fold'">
          <a-row>
            <a-col :md="8" :sm="24">
              <a-form-item
                  label="资源名/路径"
                  :labelCol="{span: 5}"
                  :wrapperCol="{span: 18, offset: 1}"
              >
                <a-input placeholder="请输入" v-model="search.keyword"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item
                  label="鉴权级别"
                  :labelCol="{span: 5}"
                  :wrapperCol="{span: 18, offset: 1}"
              >
                <a-select placeholder="请选择" v-model="search.auth">
                  <a-select-option value="">所有</a-select-option>
                  <a-select-option value="OPEN">开放</a-select-option>
                  <a-select-option value="LOGIN">登陆</a-select-option>
                  <a-select-option value="AUTH">鉴权</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
        <span style="float: right; margin-top: 3px;">
          <a-button type="primary" @click="loadData">查询</a-button>
          <a-button style="margin-left: 8px">重置</a-button>
        </span>
      </a-form>
    </div>
    <div>
      <standard-table
          :columns="columns"
          :dataSource="dataSource"
          :selectedRows.sync="selectedRows"
          @clear="onClear"
          @change="onChange"
          @selectedRowChange="onSelectChange"
      >
        <template slot="statusTitle">
          <a-icon @click.native="onStatusTitleClick" type="info-circle"/>
        </template>
      </standard-table>
    </div>
  </a-card>
</template>

<script>
import StandardTable from '@/components/table/StandardTable'
import {GET_RESOURCE} from '@/services/api'
import {METHOD, request} from '@/utils/request'

const columns = [
  {
    title: '资源编号',
    dataIndex: 'code'
  },
  {
    title: '资源名',
    dataIndex: 'name'
  },
  {
    title: '资源路径',
    dataIndex: 'url'
  },
  {
    title: '请求方式',
    dataIndex: 'method'
  },
  {
    title: '鉴权级别',
    dataIndex: 'authLevel'
  },
  {
    title: '所属服务',
    dataIndex: 'ownerServe'
  },
  {
    title: '所属应用',
    dataIndex: 'ownerApp'
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime'
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]

const dataSource = []

export default {
  name: 'ResourceList',
  components: {StandardTable},
  data() {
    return {
      advanced: false,
      columns: columns,
      dataSource: dataSource,
      selectedRows: [],
      search: {
        keyword: '',
        auth: ''
      }
    }
  },
  methods: {
    deleteRecord(key) {
      this.dataSource = this.dataSource.filter(item => item.key !== key)
      this.selectedRows = this.selectedRows.filter(item => item.key !== key)
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    remove() {
      this.dataSource = this.dataSource.filter(item => this.selectedRows.findIndex(row => row.key === item.key) === -1)
      this.selectedRows = []
    },
    onClear() {
      this.$message.info('您清空了勾选的所有行')
    },
    onStatusTitleClick() {
      this.$message.info('你点击了状态栏表头')
    },
    onChange() {
      this.$message.info('表格状态改变了')
    },
    onSelectChange() {
      this.$message.info('选中行改变了')
    },
    loadData() {
      console.log(this.search.keyword);
      const options = {
        page: 1,
        size: 10,
        condition: {
          name: this.search.keyword,
          url: this.search.keyword,
          authLevel: this.search.auth
        }
      }
      request(GET_RESOURCE, METHOD.POST, options).then(result => {
        console.log(result.data);
        if (result.data.code === "SUCCESS") {
          this.dataSource = new Array();
          const respData = result.data.data;
          respData.records.forEach(item => {
            this.dataSource.push({
              key: item.code,
              code: item.code,
              name: item.name,
              url: item.url,
              method: item.method,
              authLevel: item.authLevel,
              ownerServe: item.ownerServe,
              ownerApp: item.ownerApp,
              updateTime: item.updateTime
            })
          })
        } else {
          this.$message.success(result.data.msg, 3)
        }
      })
    }
  },
  created() {
    this.loadData();
  }
}
</script>

<style lang="less" scoped>
.search {
  margin-bottom: 54px;
}

.fold {
  width: calc(100% - 216px);
  display: inline-block
}

.operator {
  margin-bottom: 18px;
}

@media screen and (max-width: 900px) {
  .fold {
    width: 100%;
  }
}
</style>
